<script setup>
  const props = defineProps({
    studentInfo: {
      type: Object,
      default: () => {
        return {
          stuNum:'',
          stuName:'',
          stuClass:'',
          stuFaculties:'',
          stuGradYear:'',
          stuPlace:'',
        };
      },
    },
    showPlace: {
      type: Boolean,
      default: true,
    },
  });
</script>

<template>
  <div>
    <div class="form-line">
      <div class="form-item">
        <div class="form-name">学生</div>
        <div class="form-cont">
          <div class="form-text">{{studentInfo.stuName}}</div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-name">性别</div>
        <div class="form-cont">
          <div class="form-text">{{studentInfo.sex == 0 ? '男' : '女'}}</div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-name">学号</div>
        <div class="form-cont">
          <div class="form-text">{{studentInfo.stuNum}}</div>
        </div>
      </div>
    </div>
    <div class="form-line">
      <div class="form-item">
        <div class="form-name">班级</div>
        <div class="form-cont">
          <div class="form-text">{{studentInfo.stuClass}}</div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-name">户籍地</div>
        <div class="form-cont">
          <div class="form-text">{{studentInfo.stuPlace}}</div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-name">政治面貌</div>
        <div class="form-cont">
          <div class="form-text">{{studentInfo.partyMember == 2  ? '党员' : '群众'}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form-text {
  color: var(--el-input-text-color, var(--el-text-color-regular));
  font-size: 14px;
  text-indent: 10px;
}
.form-line{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e5e5e5;
  margin-bottom: 20px;
  .form-item{
    display: flex;
    align-items: center;

    .form-cont{
      width: calc(100% - 100px);
      :deep(.el-input){
        --el-input-border-color:#fff !important;
        --el-input-focus-border:#fff !important;
        --el-input-focus-border-color:#fff !important;
      }
    }
  }
}

.cont{
  padding:20px;
}
.top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
}

.form-name {
  width: 150px;
}

.right-text {
  display: flex;
  align-items: center;

  span {
    color: #152584;
    margin-right: 20px;
  }
}

.form-name {
  background: #f1f7ff;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  font-weight: bold;
  border-right: 1px solid #e5e5e5;
}

.form-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e5e5e5;
  margin-bottom: 20px;

  .form-item {
    display: flex;
    align-items: center;

    .form-cont {
      width: calc(100% - 100px);

      :deep(.el-input) {
        --el-input-border-color: #fff !important;
        --el-input-focus-border: #fff !important;
        --el-input-focus-border-color: #fff !important;
      }
    }
  }
}
</style>
